<%--
  Created by IntelliJ IDEA.
  User: lichengming
  Date: 2017/6/15
  Time: 下午12:11
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ include file="/resources.jsp" %>

<html>
<head>
    <title>类型</title>
    <script>
        $(function () {
            $('#begin_time,#end_time').datetimepicker({
                language : 'zh-CN',
                format : 'yyyy-MM-dd HH:mm:ss'
            });
        })
    </script>
    <style type="text/css">
        .choose-banners {
            position: relative;
            padding: 25px 15px 15px;
            margin: 15px 0;
            background-color: #fafafa;
            box-shadow: inset 0 3px 6px rgba(0, 0, 0, .05);
            border-color: #e5e5e5 #eee #eee;
            border-style: solid;
            border-width: 1px 0;
        }

        #filePicker {
            display: inline-block;
            line-height: 1.428571429;
            vertical-align: middle;
            margin: 0 12px 0 0;
        }

        #typeFilePicker {
            display: inline-block;
            line-height: 1.428571429;
            vertical-align: middle;
            margin: 0 12px 0 0;
        }

        .uploader-list {
            width: 100%;
            overflow: hidden;
        }

        .type-uploader-list {
            width: 100%;
            overflow: hidden;
        }

        #uploader-banners .thumbnail {
            /*width: 110px;*/
            /*height: 110px;*/
        }
        .file-item {
            float: left;
            position: relative;
            margin: 0 20px 20px 0;
            padding: 4px;
        }

        .begin_upload_btn {
            height: 40px;
            position: relative;
        }

        .file-item .info {
            position: absolute;
            left: 4px;
            bottom: 4px;
            right: 4px;
            height: 20px;
            line-height: 20px;
            text-indent: 5px;
            background: rgba(0, 0, 0, 0.6);
            color: white;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            font-size: 12px;
            z-index: 10;
        }
        .file-item .error {
            position: absolute;
            top: 4px;
            left: 4px;
            right: 4px;
            background: red;
            color: white;
            text-align: center;
            height: 20px;
            font-size: 14px;
            line-height: 23px;
        }


        .file-item .success {
            position: absolute;
            top: 4px;
            left: 4px;
            right: 4px;
            height: 20px;
            line-height: 20px;
            text-indent: 5px;
            background: rgba(63, 117, 4, 0.88);
            color: white;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            font-size: 12px;
            z-index: 10;
        }

        .image-remove {
            position: absolute;
            right: 6px;
            top: 6px;
            cursor: pointer;
            color: white;
            z-index: 10000;
        }
        .ems_edit_content {
            width: 100%;
        }

        .notice {
            font-size: 14px;
            color: #9C27B0;
            margin-top: -15px;
        }
    </style>
    <link rel="stylesheet" type="text/css" href="/ems/plugins/webuploader/webuploader.css">
    <script type="text/javascript" src="/ems/plugins/webuploader/webuploader.js"></script>
</head>
<body>

<div class="ems_form">
    <div class="panel panel-default">
        <div class="panel-heading ems_add_heading">
            <h3 class="panel-title" style="color: inherit;">文章类型新增</h3>
            <div class="ems_add_gbtn">
                <button type="button" class="btn btn-primary ems_form_submit">
                    <span class="glyphicon glyphicon-check"></span> 保存
                </button>
                <button type="button" class="btn btn-default ems_form_reset">
                    <span class="glyphicon glyphicon-shopping-cart"></span> 重置
                </button>
            </div>
        </div>
        <div style="margin-left: 10px;margin-right: 10px;">
            <div class="ems_edit_content">
                <form class="form-horizontal ems_internal_form">

                    <div class="form-group">
                        <label class="col-sm-3 control-label">轮播图片：</label>
                        <div class="col-sm-9">
                            <!--dom结构部分-->
                            <div id="uploader-banners" class="choose-banners">
                                <!--用来存放item-->
                                <div id="fileList" class="uploader-list">
                                    <c:if test="${not empty btype.id}">
                                        <c:forEach items="${btype.banners}" var="banner" varStatus="obj">
                                            <c:if test="${not empty banner}">
                                                <div id="WU_FILE_${obj['index']+100}" class="file-item thumbnail upload-state-done">
                                                    <img class="edit_img" style="height: 100px;" rurl="${banner}" src="${banner}">
                                                    <span class="image-remove"><i class="glyphicon glyphicon-remove-circle"></i></span>
                                                </div>
                                            </c:if>
                                        </c:forEach>
                                    </c:if>
                                </div>
                                <div id="filePicker" class="webuploader-container">选择图片</div>
                                <button id="upBtn" class="begin_upload_btn btn btn-default">开始上传</button>
                            </div>
                        </div>
                        <%--<label class="col-sm-3 control-label"></label>--%>
                        <%--<label class="notice col-sm-7">*如果该大类有logo,则取第一张作为logo图片</label>--%>
                    </div>

                    <c:if test="${not empty btype.id}">
                        <c:forEach items="${btype.urls}" var="url" varStatus="obj">
                            <c:if test="${not empty url}">
                                <div class="form-group" id="url_WU_FILE_${obj['index']+100}">
                                    <label class="col-sm-3 control-label"></label>
                                    <div class="col-sm-9"> <input type="text" required=""  value="${url}" class="form-control banner_url" placeholder="请配置第${obj['index']+100}张图片跳转链接">
                                    </div>
                                </div>
                            </c:if>
                        </c:forEach>
                    </c:if>
                    <div class="form-group" id="name_div">
                        <label class="col-sm-3 control-label">大类名称：</label>
                        <div class="col-sm-9">
                            <input type="text" id="btype" class="form-control" placeholder="必填，长度不超过64" required maxlength="64">
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-3 control-label">小类图片：</label>
                        <div class="col-sm-9">
                            <!--dom结构部分-->
                            <div id="type-uploader-banners" class="choose-banners">
                                <!--用来存放item-->
                                <div id="typeFileList" class="type-uploader-list">

                                </div>
                                <div id="typeFilePicker" class="webuploader-container">选择图片</div>
                                <button id="typeUpBtn" class="begin_upload_btn btn btn-default">开始上传</button>
                            </div>
                        </div>
                        <%--<label class="col-sm-3 control-label"></label>--%>
                        <%--<label class="notice col-sm-7">*如果该大类有logo,则取第一张作为logo图片</label>--%>
                    </div>
                </form>
            </div>
        </div>

    </div>
</div>
<script>
    function removeBannres($target) {

        $parent = $target.parent();
        $("#url_" + $parent.attr("id")).remove();
        $parent.remove();

        //重新编排
        var count = 1;
        $(".banner_url").each(function (index,val) {
            $(this).attr("placeholder","请配置第"+count+"张图片跳转链接");
            count++;
        });
    }
    jQuery(function() {
        var $ = jQuery,
            $list = $('#fileList'),
            ratio = window.devicePixelRatio || 1,
            thumbnailWidth = 100 * ratio,
            thumbnailHeight = 100 * ratio,

            uploader;

        uploader = WebUploader.create({

            auto: false,
            swf: '/ems/plugins/webuploader/Uploader.swf',
            server: '/ems/upload/fupload',
            pick: '#filePicker',
            accept: {
                title: 'Images',
                extensions: 'jpg,jpeg,png',
                mimeTypes: 'image/jpg,image/jpeg,image/png'
            },
        });

        uploader.on( 'fileQueued', function( file ) {
            var $li = $(
                    '<div id="' + file.id + '" class="file-item thumbnail" style="width: 110px;height: 110px;">' +
                    '<img>' +
                    '<div class="info">' + file.name + '</div>' +
                    '<span class="image-remove"><i class="glyphicon glyphicon-remove-circle"></i></span>' +
                    '</div>'
                ),
                $img = $li.find('img');

            $list.append( $li );

            uploader.makeThumb( file, function( error, src ) {
                if ( error ) {
                    $img.replaceWith('<span>无法生成缩略图</span>');
                    return;
                }

                $img.attr( 'src', src );
            }, thumbnailWidth, thumbnailHeight );

            $(".image-remove").on("click",function () {
                removeBannres($(this))
            })
        });

        uploader.on( 'uploadProgress', function( file, percentage ) {
            var $li = $( '#'+file.id ),
                $percent = $li.find('.progress span');

            if ( !$percent.length ) {
                $percent = $('<p class="progress"><span></span></p>')
                    .appendTo( $li )
                    .find('span');
            }
            $percent.css( 'width', percentage * 100 + '%' );
        });

        uploader.on( 'uploadSuccess', function(file,resp) {

            $( '#'+file.id ).addClass('upload-state-done');
            var $li = $( '#'+file.id ),
                $succeed = $li.find('div.success');

            if ( !$succeed.length ) {
                $succeed = $('<div class="success">上传成功</div>').appendTo( $li );
            }

            $li.find("img").attr("rurl",resp.url);

            var index = 0;
            var $successItem = $("#fileList").find(".upload-state-done");
            if (!$successItem || $successItem.length == 0) {
                index ++;
            }else {
                index = $successItem.length;
            }
            var html = '<div class="form-group" id="url_'+file.id+'"><label class="col-sm-3 control-label"></label><div class="col-sm-9"> <input type="text" required value="" class="form-control banner_url" placeholder="请配置第'+index+'张图片跳转链接"> </div> </div>';
            $("#name_div").before(html);

        });

        uploader.on( 'uploadError', function( file ) {
            var $li = $( '#'+file.id ),
                $error = $li.find('div.error');

            if ( !$error.length ) {
                $error = $('<div class="error"></div>').appendTo( $li );
            }

            $error.text('上传失败');
        });

        uploader.on( 'uploadComplete', function( file ) {
            $( '#'+file.id ).find('.progress').remove();
        });

        $("#upBtn").on( 'click', function(event) {
            if ($("#fileList").children().length == 0) {
                $.errorAlert("请选择图片上传");
                return;
            }
            uploader.upload();
            return false;
        });
    });
</script>
<script>
    jQuery(function(){
        //小类图片

        var $ = jQuery,
            $typeList = $('#typeFileList'),
            ratio = window.devicePixelRatio || 1,
            thumbnailWidth = 100 * ratio,
            thumbnailHeight = 100 * ratio,

            typeUploader;

        typeUploader = WebUploader.create({

            auto: false,
            swf: '/ems/plugins/webuploader/Uploader.swf',
            server: '/ems/upload/fupload',
            pick: '#typeFilePicker',
            accept: {
                title: 'Images',
                extensions: 'jpg,jpeg,png',
                mimeTypes: 'image/jpg,image/jpeg,image/png'
            },
        });

        typeUploader.on( 'fileQueued', function( file ) {
            var $typeLi = $(
                '<div id="' + file.id + '" class="file-item thumbnail" style="width: 110px;height: 110px;">' +
                '<img>' +
                '<div class="info">' + file.name + '</div>' +
                '<span class="image-remove"><i class="glyphicon glyphicon-remove-circle"></i></span>' +
                '</div>'
                ),
                $typeImg = $typeLi.find('img');

            $typeList.append( $typeLi );

            typeUploader.makeThumb( file, function( error, src ) {
                if ( error ) {
                    $typeImg.replaceWith('<span>无法生成缩略图</span>');
                    return;
                }

                $typeImg.attr( 'src', src );
            }, thumbnailWidth, thumbnailHeight );

            $(".image-remove").on("click",function () {
                removeBannres($(this))
            })
        });

        typeUploader.on( 'uploadProgress', function( file, percentage ) {
            var $typeLi = $( '#'+file.id ),
                $typePercent = $typeLi.find('.progress span');

            if ( !$typePercent.length ) {
                $typePercent = $('<p class="progress"><span></span></p>')
                    .appendTo( $typeLi )
                    .find('span');
            }
            $typePercent.css( 'width', percentage * 100 + '%' );
        });

        typeUploader.on( 'uploadSuccess', function(file,resp) {

            $( '#'+file.id ).addClass('upload-state-done');
            var $typeLi = $( '#'+file.id ),
                $typeSucceed = $typeLi.find('div.success');

            if ( !$typeSucceed.length ) {
                $typeSucceed = $('<div class="success">上传成功</div>').appendTo( $typeLi );
            }

            $typeLi.find("img").attr("rurl",resp.url);

            var index = 0;
            var $typeSuccessItem = $("#typeFileList").find(".upload-state-done");
            if (!$typeSuccessItem || $typeSuccessItem.length == 0) {
                index ++;
            }else {
                index = $typeSuccessItem.length;
            }
        });

        typeUploader.on( 'uploadError', function( file ) {
            var $typeLi = $( '#'+file.id ),
                $typeError = $typeLi.find('div.error');

            if ( !$typeError.length ) {
                $typeError = $('<div class="error"></div>').appendTo( $typeLi );
            }

            $typeError.text('上传失败');
        });

        typeUploader.on( 'uploadComplete', function( file ) {
            $( '#'+file.id ).find('.progress').remove();
        });

        $("#typeUpBtn").on( 'click', function(event) {
            if ($("#typeFileList").children().length == 0) {
                $.errorAlert("请选择图片上传");
                return;
            }
            typeUploader.upload();
            return false;
        });
    });

</script>
<script>


    function saveArticleType(data) {
        $.emsAjax({
            url:"/ems/union/btypeSave",
            type:"POST",
            data:data,
            success:function (resp) {
                if (resp.status == "000") {
                    $.toast("保存成功",function () {
                        window.location.href = "/ems/union/index";
                    })
                }else {
                    $.errorAlert(resp.message);
                }
            }
        })
    }

    $.validator.setDefaults({
        //认证成功
        submitHandler: function(form) {
            var data = {};

            data["btype"] = $("#btype").val();

            var banners = [];
            $("#fileList").find(".upload-state-done").each(function (i,v) {
                banners.push($(v).find("img").attr("rurl"));
            });

            if (banners.length > 0) {
                data["banners"] = banners.join(",");
            }

            var bannerUrls = [];
            $(".banner_url").each(function (index,val) {
                var url = $.trim($(val).val());
                if( url == "") {
                    bannerUrls.push("#");
                }else {
                    bannerUrls.push(url);
                }
            });
            data["bannerUrls"] = bannerUrls.join(",");

            var typeBanners = [];
            $("#typeFileList").find(".upload-state-done").each(function (i,v) {
                typeBanners.push($(v).find("img").attr("rurl"));
            });

            if (typeBanners.length > 0) {
                data["typeBanners"] = typeBanners.join(",");
            }

            saveArticleType(data);
        }
    });

    $(function () {

        $(".ems_internal_form").validate();

        $(".ems_form_submit").on("click",function () {
            var form = $(this).parents(".ems_form").find("form:first");
            form.submit();
        });

        $(".ems_form_reset").on("click",function () {
            $(this).parents(".ems_form").find("form:first")[0].reset();
        })
        $(".image-remove").on("click",function () {
            removeBannres($(this));
        })

        $("#add_small_type").on("click",function () {

            var stypeHTML = '<div class="form-group" id="name_div">' +
                '<label class="col-sm-3 control-label">小类名称：</label>' +
            '<div class="col-sm-8">' +
                '<input type="text" required class="form-control s_type_clss" placeholder="请填写小类名称">' +
                '</div>' +
                    '<button type="button" class="btn btn-danger stype_del">删除</button>' +
                '</div>';
            $("#add_stype_div").before(stypeHTML);

            $(".stype_del").on("click",function () {
                $(this).parent().remove();
            })
        })
    });
</script>
</body>
</html>
